<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <button @click="list.sort((a,b)=>a-b)">排序</button>
            <button @click="addEle">生成(push)</button>
        </div>
        <ul>
            <li v-for="(item,index) in list" :key="index">{{item}}</li>
        </ul>

        <div>
            <p>{{count}}</p>
            <button @click="count++">count++</button>
        </div>

        <div>
            <h2>取数组中的偶数</h2>
            <!-- <p>{{list.filter(v=>v%2==0)}}</p> -->
            <!-- 方法methods -->
            <p>{{getEven()}}</p>
            <p>{{getEven()}}</p>
            <p>{{getEven()}}</p>
            <p>{{getEven()}}</p>
            <p>{{getEven()}}</p>
            <p>{{getEven()}}</p>

            <!-- 计算属性 -->
            <p>{{getOu}}</p>
            <p>{{getOu}}</p>
            <p>{{getOu}}</p>
            <p>{{getOu}}</p>
            <p>{{getOu}}</p>
            <p>{{getOu}}</p>
        </div>

    </div>
</body>
<script>
    // 在Vue的模板语法中,每次数据发生改变触发视图更新(根据模板编译的到新的虚拟DOM, 对比之后在渲染为真实DOM) => 每次编译虚拟DOM时, 页面中使用的methods中的函数都要重新执行 >=> 浪费性能

    // 问: 有没有什么方法,能让我们的方法只有在依赖的数据改变时,才会执行,如果依赖的数据没有发生改变 => 使用之前缓存的结果(上一次的结果);  => 解决方法:使用计算属性
    
    // 计算属性(派生值或衍生值)  =>  实力化对象的属性中
    // 相当于给实力化对象绑定了一个新属性(派生值或衍生值), 依赖于data中的一个或多个属性得到的一个新属性, 当依赖的属性发生变化时,计算属性中的函数也会重新执行,得到一个新值,并缓存计算的结果, 如果依赖的属性没有发生变化时,会一直使用缓存的结果
    // 注意: 计算属性的初始值会在实例化对象创建之后, Vue把模板编译为虚拟DOM之前默认先执行一次
    //       计算属性是基于它们的响应式依赖进行缓存的

    // 可以理解为: 
    // 计算属性的函数默认在初始化阶段执行一次, 后续是否执行,完全看它依赖的数据(data中的相关属性) => 默认是被动变化

    // 购物车:
    // 小计 = 单价 * 数量

    // 公司
    // 老板 =  员工 +  员工 + 员工;






    var vm = new Vue({
        el: "#app",
        data: {
            count:1,
            list: [1, 4, 7, 2, 5, 8, 3, 6, 9],
        },
        methods: {
            addEle: function () {
                var num = Math.round(Math.random() * 100);
                // this.list.push(num);   // 影响原数组 => 数组的变更方法
                this.list = this.list.concat(num);  // concat方法返回新数组
            },
            getEven:function(){
                console.log("获取数组偶数,getEven");
                return this.list.filter(v=>v%2==0);
            }
        },
        computed:{
            // 计算属性的函数默认在初始化阶段执行一次, 后续是否执行,完全看它依赖的数据(data中的相关属性) => 默认是被动变化
            geList:function(){   // 此写法,没有依赖data中的数据  => 属性值始终[1,2,3]
                return  [1,2,3];
            },
            getOu:function(){
                console.log("获取数组偶数,getOu");
                var arr = this.list.filter(v=>v%2==0);
                return arr; // [4,2,8,6]
            }
        }
    })

    console.log(vm);


</script>

</html>